<template>
  <div class="account">
    <!--    忘记密码-->

    <!--背景动态图-->
    <vue-particles
        class="login-bg backBox"
        color="#a8b0e1"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#a8b0e1"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
    />


    <div class="headTop" @click="onClickLeft">
      <van-icon name="arrow-left" />
    </div>
    <h3>忘记密码</h3>
    <van-form validate-first @failed="onFailed" @submit="submit">
<div class="itemTop">
  <van-field
      v-model="valuetext"
      name="validatorText"
      label="账号"
      placeholder="账号"
      :rules="[{ required: true ,message: '请填写用户名' }]"
  />
</div>

      <div  class="passInput">
        <van-field
            v-model="valuepass"
            name="validator"
            :type="eyeShow?'text':'password'"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[{  validator, message: '请输入格式正确的密码' }]"
        />
        <div class="passEyE" @click="onEyE">
          <van-icon v-show="!eyeShow" name="closed-eye" />
          <van-icon v-show="eyeShow" name="eye-o" />
        </div>
      </div>

      <van-field
          v-model="valuePhonenumber"
          name="valuePhonenumber"
          label="手机号"
          placeholder="手机号"
          :rules="[{ validator: phoneVerification ,message: '请输入手机号' }]"
      />
      <div class="itemInput itemBot">
        <div>
          <button class="sendOut"
                  @click="timerDisabledTwoEdition"
                  v-html="buttonTextFlag? '发送验证码': phoneNumTime"
                  :disabled="buttonCountFlag"
          ></button>
        </div>
        <van-field
            v-model="valueCode"
            name="validatorText"
            placeholder="验证码"
            :rules="[{ required: true ,message: '请输入验证码' }]"
        />
      </div>


      <div class="defl SwitchPages">
        <router-link tag="p" to="/phonesign">验证码登录</router-link>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>

    </van-form>
  </div>
</template>

<script>
import {Toast} from "vant";
import {Forgotpass, PhoneSignApi} from "@/api/api";
export default {
  name: "Forgotpassword",
  data() {
    return {
      eyeShow: false,
      valuetext: '',
      valuepass: '',
      valuePhonenumber: '',
      valueCode: '',
      //定时器
      buttonCountFlag: false,
      buttonTextFlag: true,
      phoneNumTime: 60,
      phoneNumMeter: null,
      pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
    }
  },
  methods: {
    //小眼睛
    onEyE(){
      this.eyeShow = !this.eyeShow
    },
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
      Toast(errorInfo.errors[0].message);
    },
    //  密码验证
    validator(value) {
      if (value) {
        let a_reg = RegExp(/^[a-zA-Z0-9]$/)
        let b_reg = RegExp(/[~!@#$%^&*()\-=·@#￥%……&*（）、‘”'"[]{}——+]+/)
        let c_reg = RegExp(/\s/)
        let d_reg = RegExp(/^[u4e00-u9fa5_a-zA-Z0-9]+$/)
        if (a_reg.test(value)) {
          Toast('格式错误');
          return false
        } else if (b_reg.test(value)) {
          Toast('不能为特殊字符');
          return false
        } else if (c_reg.test(value)) {
          Toast('不能为空格');
          return false
        } else if (value.replace(/[^x00-xff]/g, 'xx').length < 6 || value.replace(/[^x00-xff]/g, 'xx').length > 20) {
          Toast('用户名不得小于6个或大于20个字符!');
          return false
        } else if (!d_reg.test(value)) {
          Toast('不能为汉字')
          return false
        } else {
          return true
        }
      } else {
        Toast('请填写账号');
        return false
      }
    },
    //  手机号验证
    phoneVerification(value) {
      if (value) {
        let a_reg = RegExp(/^[a-zA-Z0-9]$/)
        let b_reg = RegExp(/[~!@#$%^&*()\-=·@#￥%……&*（）、‘”'"[]{}——+]+/)
        let c_reg = RegExp(/\s/)
        let d_reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (a_reg.test(value)) {
          Toast('格式错误');
          return false
        } else if (b_reg.test(value)) {
          Toast('不能为特殊字符');
          return false
        } else if (c_reg.test(value)) {
          Toast('不能为空格');
          return false
        } else if (!d_reg.test(value)) {
          Toast('请填写正确的手机号')
          return false
        } else {
          return true
        }
      } else {
        Toast('请填写手机号');
        return false
      }
    },



    //验证码计时器包括验证手机号正则
    timerDisabledTwoEdition() {
      //显示文字发送请求
      if (this.pattern.test(this.valuePhonenumber)) {
        //发送手机验证码
        if (this.buttonTextFlag) {
          console.log(this.valuePhonenumber)
          PhoneSignApi(this.valuePhonenumber).then(res=>{
            console.log(res)
            Toast('已发送验证码');
          })
        }
        //数子显示文字隐藏
        this.buttonCountFlag = true
        this.buttonTextFlag = false
        // 开始计时器
        this.phoneNumMeter = setInterval(() => {
          this.phoneNumTime -= 1
          // 判断数字等于零 结束定时器 数值重新被赋值60 提示框为空 按钮可用
          if (this.phoneNumTime == 0) {
            clearInterval(this.phoneNumMeter)
            this.phoneNumTime = 60
            // 显示文字
            this.buttonTextFlag = true
            // 显示数字
            this.buttonCountFlag = false
          }
        }, 1000)
      }
    },

    submit() {
      //账号密码接口
      console.log(this.valuetext, this.valuepass, this.valuePhonenumber, this.valueCode,)



      Forgotpass(this.valuetext, this.valuepass, this.valuePhonenumber, this.valueCode,).then(res => {

        if (res.data.code == 0 || res.data.status == 200) {
          this.$store.state.isLogin = true
          this.$router.push({path: '/index'})
        } else {
          Toast(res.data.msg);
        }

      })


    },
  },
}
</script>

<style scoped lang="less">

.account {
  background-color: rgb(255,255,255);

  //背景图
  .backBox {
    position: absolute;
    background-color: rgb(255,255,255);

    //background-color: rgb(168,176,225);
    //background-color: rgb(176, 224, 230);
    //background-color: rgb(163,148,128);
    height: 100vh;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100vw;
  }
  padding: 0 18px;
  //密码小眼睛
  .passInput {
    position: relative;

    .passEyE {
      position: absolute;
      top: 8px;
      right: 30px;
      width: 31px;
      height: 29px;
      //border: 1px solid red;
      i {
        font-size: 20px;
      }
    }
  }
    .headTop {
      margin-top: 33px;

      i {
        font-size: 22px;
      }
    }

    h3 {
      margin-top: 33px;
      margin-bottom: 54px;
      color: #EC0D0D;
      font-size: 28px;
    }

  .itemTop {
    border-radius: 9px 9px 0 0;
    overflow: hidden;
  }

  .itemBot {
    border-radius: 0 0 9px 9px;
    overflow: hidden;

  }

    .itemInput {
      background-color: #F8F8F8;

      /deep/ .InputDiv {
        width: 100%;
        background-color: #F8F8F8;
        border: 0;
      }

      input {
        width: 100%;
        background-color: #F8F8F8;
        border: 0;
        text-indent: 18px;
        height: 50px;
        line-height: 50px;
      }

      input.inputVerification {
        width: 66%;
      }

      button.sendOut {
        background-color: #F8F8F8;
        width: 30%;
        border: 0;
        line-height: 50px;
      }

      .p {
        height: 25px;
        line-height: 25px;
        color: red;
        padding-left: 20px
      }
    }

    .SwitchPages {
      font-size: 14px;
      color: #BDBDBD;
      margin-top: 25px;
      margin-bottom: 30px;

    }

    .buttonSign {
      text-align: center;
      width: 80%;
      height: 40px;
      line-height: 40px;
      color: white;
      background-color: #FF0000;
      margin: auto;
      border-radius: 22px;
    }

}
</style>